<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../../js/plugins/layui-v2.4.5/layui/css/layui.css" />
		<link rel="stylesheet" href="../../css/reset.css" />
		<link rel="stylesheet" href="../../css/layer_list.css" />
		<style>
		</style>
	</head>
	<body class="p15">
		<div class="container">
			<div class="layui-row count-show p10">
				<div class="layui-col-sm3 lh30">
					<label class="layui-form-label">机房利用率：</label>
					<span style="color: #ff9900;">90%</span>
				</div>
				<div class="layui-col-sm3 lh30">
					<label class="layui-form-label">机柜数量：</label>
					<span>21个</span>
				</div>
				<div class="layui-col-sm3 lh30">
					<label class="layui-form-label" style="width: 130px;">可安装设备的：</label>
					<span>2个</span>
				</div>
				<div class="layui-col-sm3 lh30">
					<label class="layui-form-label">剩余空间：</label>
					<span>48U</span>
				</div>
			</div>
			<div class="layui-row mb15 layui-col-space10">
				<div class="layui-col-sm2"><label class="layui-form-label" >设备情况：</label></div>
				<div class="layui-col-xs2">
					<a href="javascript:;" class="backlog-body">
						<h3>运行中</h3>
						<p style="color: #32a7fe;"><cite>35</cite>台</p>
					</a>
				</div>
				<div class="layui-col-xs2">
					<a href="javascript:;" class="backlog-body">
						<h3>正常</h3>
						<p style="color: #81d32f;"><cite>31</cite>台</p>
					</a>
				</div>
				<div class="layui-col-xs2">
					<a href="javascript:;" class="backlog-body">
						<h3>维修中</h3>
						<p style="color: #fe9f10;"><cite>3</cite>台</p>
					</a>
				</div>
				<div class="layui-col-xs2">
					<a href="javascript:;" class="backlog-body">
						<h3>报警</h3>
						<p style="color: #fd4a1d;"><cite>1</cite>台</p>
					</a>
				</div>
				<div class="layui-col-xs2">
					<a href="javascript:;" class="backlog-body">
						<h3>未运行</h3>
						<p style="color: #848484;"><cite>8</cite>台</p>
					</a>
				</div>
			</div>
			<table id="list" lay-filter="list"></table>
		</div>
		<script src="../../js/jquery-3.3.1.min.js"></script>
		<script src="../../js/plugins/layui-v2.4.5/layui/layui.js"></script>
		<script>
			var data = [{
					id: 1,
					name: '华为5700',
					address: '网络机房',
					type:'交换机',
					time:'2016.1.1',
					state:0,
					state_m:'正常'
				}
			];
			layui.use(['table'],function(){
				var table = layui.table;
				//第一个实例
				  table.render({
					elem: '#list'
					,height: '300'
					,url: '' //数据接口
					,page: true //开启分页
					,cols: [[ //表头
					  	{
					  		field: 'xh',
					  		title: '序号',
					  		width: 80,
					  		align: 'center',
					  		templet: function(d) {
					  			return d.LAY_INDEX;
					  		}
					  	}, {
					  		field: 'name',
					  		title: '设备名称',
					  		align: 'center'
					  	}, {
					  		field: 'address',
					  		title: '存放地点',
					  		align: 'center'
					  	}, {
					  		field: 'type',
					  		title: '资产类别',
					  		align: 'center'
					  	}
						,{field: 'state', title: '资产状态', align:'center'
						,templet:function(d){
							var arr = ['在用','待废','已过保'];
							var colors = ['layui-btn layui-btn-xs','layui-btn layui-btn-warm layui-btn-xs','layui-btn layui-btn-primary layui-btn-xs']
							return `<span class="${colors[d.state]}">${arr[d.state]}</span>`
						}}
						,{field: 'state_m', title: '设备状态',align:'center'}
					]]
					,data:data
				  });
			})
			$(function(){
				$("#addBtn").click(function(){
					top.tabAdd('机房新增','jifang_add','pages/jifang/jifang_add.html',true,true);
					
				})
			})
		</script>
	</body>
</html>
